<template>
  <div class="footer" :class="footerClass">
    <div class="footer-containner">
      <div class="desc">
        <p class="zh" v-if="langCode === 0">{{ text }}</p>
        <p class="en" v-else>{{ text }}</p>
      </div>
      <div class="footer-logo"><img src="../assets/footer-logo.png" /></div>
      <div class="we-code">
        <div class="code-img"><img src="../assets/we-code.png" /></div>
        <div class="address">
          <p class="title">联系方式</p>
          <div class="text">
            <p>地址：北京市朝阳区，和平街西苑2号</p>
            <p>电话：010-59068899</p>
            <p>邮箱：zdwyhbgs@163.com</p>
          </div>
        </div>
      </div>
    </div>
    <el-backtop :bottom="100">
      <img src="../assets/backTop.png" style="width: 100%; height: 100%" />
    </el-backtop>
  </div>
</template>

<script>
import { footer } from "@/lang";
export default {
  name: "Footer",
  computed: {
    langChange() {
      return this.$store.state.langChange;
    },
  },
  watch: {
    langChange() {
      this.initLang();
    },
  },
  data() {
    return {
      footer,
      text: "",
      langCode: 0,
      footerClass:""
    };
  },
  created() {
    this.initLang();
    if(!this.getIsPC()){
      this.footerClass = 'footer-class'
    }
  },
  methods: {
    getIsPC() {
      let userAgentInfo = navigator.userAgent;
      let Agents = new Array(
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      );
      let flag = true;
      for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    initLang() {
      const lang = localStorage.getItem("lang");
      this.langCode = lang === "ZH" ? 0 : 1;
      this.setPageLanguage(lang);
    },
    setPageLanguage(_lang) {
      const lang = _lang.toLowerCase();
      this.text = footer.text[lang];
    }
  },
};
</script>

<style scoped lang="less">
.footer-class{
   // width:1240px;
   // margin:0 auto;
}
.footer {
  background-color: #255389;
  padding: 30px 0;
  margin-top: 50px;
  .footer-containner {
    width: 1200px;
    margin: 0 auto;
    overflow:hidden;
    background-color: transparent;
    .desc {
      width: 400px;
      color: #fff;
      margin-top: 40px;
      float:left;
      .zh {
        line-height: 25px;
        margin-top: 10px;
      }
      .en {
        line-height: 21px;
      }
    }

    .footer-logo {
      float:left;
      margin-left:128px;
      margin-top: 30px;

      img {
        width: 200px;
      }
    }

    .we-code {
      display: flex;
      float:right;
      margin-top: 50px;
    }

    .code-img {
      img {
        width: 120px;
        margin-right: 15px;
      }
    }

    .address {
      color: #fff;

      .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
      }

      .text {
        line-height: 25px;
      }
    }
  }
}
/deep/ .el-backtop {
  width: 60px;
  height: 60px;
}
</style>
